﻿/**
 * 立方体特效
 * 	动画名	立方体|cube
 * 	初始化参数
 * 		direct	翻转方向，不传该参数时会根据滑动方向自动判断，点击时默认为left
 * 			top|bottom|left|right
 * 		duration = 1500,	// 持续时间
 *
 * @author ct
 * @version 2015-06-05
 * github: https://github.com/xingqiao/ct_effect
 */

;(function(window, document) {
    var opts = {
        direct: 'left',	// 翻转方向
        duration: 1000,	// 翻转时间
        perspective: 500	// 视点距离
    };
    function _cube(params, callback) {
        var duration = params.duration > 300 ? params.duration : opts.duration,
            perspective = params.perspective > 500 ? params.perspective : opts.perspective,
            direct = /^(top|bottom|left|right)$/i.test(params.direct) ? params.direct.toLowerCase() : 'left',
            wrap = params.canvas.parentElement,
            css = {},
            isLR = /left|right/.test(direct),
            isTR = /top|right/.test(direct),
            isBR = /bottom|right/.test(direct);
        ['transition', 'transform', 'transform-style', 'transform-origin', 'backface-visibility'].forEach(function(s){
            css[s] = (s in wrap.style ? '' : '-webkit-') + s;
        });
        var w = params.width, h = params.height,
            dc = (isLR ? w : h) / 2,	// 旋转中心距平面距离,
            rd = '' + ~~!isLR + ',' + ~~isLR + ',0',	// 旋转轴
            blinds = document.createDocumentFragment(), c = params.canvas;
        var d = document.createElement('div');
        wrap.appendChild(d);
        d.style.cssText = 'margin:0;display:block;position:absolute;' + css['transform-style'] + ':preserve-3d;' + css['backface-visibility'] + ':hidden;' + css.transition + ':transform ' + (duration - 50) + 'ms ease;' + css['backface-visibility'] + ':hidden;' + css.transform + ':perspective(' + perspective + 'px) translate3d(0,0,-' + dc + 'px)';
        c.style[css.transform] = 'translate3d(0,0,' + dc + 'px)';
        d.appendChild(c);
        if (params.target) {
            var nextImg = new Image();
            nextImg.width = w;
            nextImg.height = h;
            nextImg.style.cssText = 'position:absolute;top:0;left:0;' + css.transform + ':translate3d(' + (isLR ? (isBR ? '-100%' : '100%') : 0) + ',' + (isLR ? 0 : (isBR ? '-100%' : '100%')) + ',' + dc + 'px) rotate3d(' + rd + ', ' + (isTR ? '-' : '') + '90deg);' + css['transform-origin'] + ':' + (isLR ? (isTR ? '100%' : 0) + ' 50%' : '50% ' + (isTR ? 0 : '100%'));
            nextImg.src = params.target;
            d.appendChild(nextImg);
            params.img.style.display = 'none';
        }
        setTimeout(function(){
            d.style[css.transform] = d.style[css.transform] + ' rotate3d(' + rd + ',' + (isTR ? '' : '-') + '90deg)';
        }, 50);
        setTimeout(function(){
            params.target && (params.img.style.display = '');
            callback && callback();
        }, duration);
    };
    window.addImgEffect && addImgEffect(['立方体', 'cube'], function(callback) {
        if (!this.direct && this.direction) {
            params.direct = Math.abs(this.direction.y) > Math.abs(this.direction.x) ? (this.direction.y > 0 ? 'bottom' : 'top') : (this.direction.x > 0 ? 'right' : 'left');
        }
        _cube(this, callback);
    })
})(window, document);
